<template>
	<view>
		<view class="edit-panel">
			<view class="line-box u-flex">
				<view class="title">联系人</view>
				<input type="text" v-model="info.realname" placeholder="请填写收货人的姓名"/>
			</view>
			<view class="line-box u-flex">
				<view class="title">手机号</view>
				<input type="text" v-model="info.phone" placeholder="请填写收货人的手机号码"/>
			</view>
			<view class="line-box u-flex">
				<view class="title">收货地址</view>
				<u-icon name="map" color="#666"></u-icon>
				<input type="text" disabled @click="value = !0" placeholder="点击选择收货地址" :value="info.province ? `${info.province} ${info.city} ${info.county}` : ''"/>
				<u-icon name="arrow-right" color="#666"></u-icon>
			</view>
			<view class="line-box u-flex">
				<view class="title">详细地址</view>
				<input type="text" v-model="info.address" placeholder="请填写详细地址"/>
			</view>
		</view>
		
		<city-select v-if="show" :defaultRegion="defaultRegion" v-model="value" @city-change="cityChange"></city-select>
		<view class="edit-btn">
			<view class="save" @click="addressEdit">保存地址</view>
			<view class="delete" v-if="type == 'edit'" @click="del">删除地址</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{
					realname:'',
					phone:'',
					province:'',
					city:'',
					county:'',
					address:'',
					address_id:'',
					default:1
				},
				type:'',
				value:!1,
				defaultRegion:[],
				show:!1//组件默认不显示
			}
		},
		methods: {
			getAddresItem(){
				this.$u.api.address({address_id:this.address_id}).then(res=>{
					const {realname,phone,province,city,county,address,id} = res
					this.info = {
						realname,
						phone,
						province,
						city,
						county,
						address,
						address_id:id,
						default:1
					}
					this.defaultRegion = [province,city,county]
					this.show = !0
				})
			},
			del(){
				uni.showModal({
					content:'是否删除此收货地址',
					success: (res) => {
						res.confirm && this.$u.api.addressDel({address_id:this.address_id}).then(res=>{
							this.$app.back()
						})
					}
				})
			},
			cityChange(e){
				this.info.province = e.province.label
				this.info.city = e.city.label
				this.info.county = e.area.label
			},
			addressEdit(){
				this.$u.api.addressEdit(this.info).then(res=>{
					this.$u.toast('保存成功')
					if(this.type == 'choose'){
						uni.$emit('addressChooseAdded')
					}
					this.$app.back()
				})
			}
		},
		onLoad(o) {
			this.type = o.type
			this.address_id = o.id
			if(o.type == 'edit'){
				this.getAddresItem()
			}else{
				this.show = !0
			}
		}
	}
</script>

<style lang="scss">
	.edit-panel{border-top: 10rpx solid #eee;padding: 0 30rpx;
		.line-box{
			height: 100rpx;border-bottom: 1rpx solid #ddd;
			.title{width: 5em;font-weight: bold;font-size: 30rpx;white-space: nowrap;}
			input{flex: 1;}
		}
	}
	.edit-btn{
		padding: 100rpx 40rpx 0;
		view{margin-top: 40rpx;height: 76rpx;line-height: 72rpx;border-radius: 100rpx;border: 2rpx solid;text-align: center;font-size: 30rpx;font-weight: bold;}
		.save{background: linear-gradient(180deg, #67EEE4 0%, #00D6C2 100%);;color: #fff;}
		.delete{border-color: #DF7B5A;color: #DF7B5A;}
	}
</style>
